<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="jquery-2.1.4/jquery.js" ></script>
    <title></title>
</head>
<body>
<input id="txt1" name="text1" type="text" value="我是测试文本">
<br>
<input type="button" id="btn1" value="点我" onclick="clickme()">
<br>
<input type="button" id="btn2" value="操作div1" onclick="clickme1()">
<input type="button" id="btn3" value="操作div2" onclick="clickme2()">

<div id="div1" style="background-color: aqua;width: 200px;height: 100px"></div>
<div id="div2" style="background-color:#dd11ff;width: 200px;height: 100px"></div>
<input type="button" onclick="loadXMLDoc()" value="click">

<script>
    function clickme(){
        $("#txt1").dblclick();
       // alert("我被点了");
        $("#txt1").toggle();//显示与隐藏的开关方法
        console.log($("txt1").value);
        $("#div1").hide("slow",function(){
            alert("看不见我")
        })

    }

    function clickme1(){
        $("#div2").fadeOut(1000);//淡出

    }
    function clickme2(){
        $("#div1").slideUp("slow");//向上收
    }

    //双击隐藏事件 ，this代表元素本身
    $("#txt1").dblclick(function(){
        $(this).hide();
            })

    $("#txt1").mouseenter(function(){
        console.log("how are you?")
    })

   //用JS DOM写一个表
    document.write("<table border=1 >")
    var i;
    var j;
    var r=4;
    var c=4;
    for(i=1;i<=r;i++)
    {
        document.write("<tr>")
        for(j=1;j<=c;j++)
            document.write("<td>"+Math.pow(j,i))  //输出数组
        document.write("</tr>")
    }
    document.write("</table>")

    //鼠标指针离开元素的事件（必须先穿过才能实现）。
    $("#txt1").mouseleave(function () {
        console.log("i am fine");
    })

    //鼠标指针进入元素（让元素获取焦点），并且发生单击的事件。
    $("#txt1").mousedown(function () {
        console.log("and you?");
    })

    //获取焦点。
    $("#txt1").focus(function () {
        console.log("thank you!");
    })


    //失去焦点。（其他地方获取了焦点）
    $("#txt1").blur(function () {
        console.log("goodbye!");
        if(this.value.length>=4){
            $(this).css("color","#fff1a2");
            console.log( $(this).html());
        }
    })
</script>


</body>
</html>